<template>
  <div>
    <el-table
      :data="list"
      style="width: 100%"
      stripe
      fit
      highlight-current-row
      current-row-key
      :row-style="{ height: '52px' }"
    >
      <el-table-column label="摊主 ID" prop="uid" />
      <el-table-column label="摊主名称" prop="uname" />
      <el-table-column label="标准分">

        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="'标准:' + scope.row.standard + '分'"
            placement="right-start"
          >
            <el-tag v-if="90 <= scope.row.standard" class="good">优秀</el-tag>
            <el-tag
              v-else-if="80 <= scope.row.standard"
              class="well"
            >良好</el-tag>
            <el-tag
              v-else-if="70 <= scope.row.standard"
              class="ordinary"
            >一般</el-tag>
            <el-tag
              v-else-if="60 <= scope.row.standard"
              class="qualified"
            >合格</el-tag>
            <el-tag v-else class="fail">不及格</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="环境分">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="'环境:' + scope.row.envir + '分'"
            placement="right-start"
          >
            <el-tag v-if="90 <= scope.row.envir" class="good">优秀</el-tag>
            <el-tag
              v-else-if="80 <= scope.row.envir"
              class="well"
            >良好</el-tag>
            <el-tag
              v-else-if="70 <= scope.row.envir"
              class="ordinary"
            >一般</el-tag>
            <el-tag
              v-else-if="60 <= scope.row.envir"
              class="qualified"
            >合格</el-tag>
            <el-tag v-else class="fail">不及格</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="安全分">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="'安全:' + scope.row.safe + '分'"
            placement="right-start"
          >
            <el-tag v-if="90 <= scope.row.safe" class="good">优秀</el-tag>
            <el-tag
              v-else-if="80 <= scope.row.safe"
              class="well"
            >良好</el-tag>
            <el-tag
              v-else-if="70 <= scope.row.safe"
              class="ordinary"
            >一般</el-tag>
            <el-tag v-else-if="60 <= scope.row.safe" class="qualified">合格</el-tag>
            <el-tag v-else class="fail">不及格</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="detail"
            icon="el-icon-s-opportunity"
            @click="message(scope.row)"
          >扣分详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="queryInfo.page"
      :page-size="10"
      layout="  prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    />

    <el-dialog :visible.sync="dialogTableVisible" title="扣分详情" size="50%">
      <el-alert
        title="该摊主的违规详情"
        :closable="false"
        type="warning"
        center
        show-icon
      />
      <el-table :data="messages">
        <el-table-column property="date" label="扣分日期" width="250" />
        <el-table-column property="uname" label="摊主名" width="100" />
        <el-table-column property="aname" label="扣分城管名" />
        <el-table-column property="type" label="扣分类型" />
        <el-table-column property="message" label="扣分信息" />
        <el-table-column property="delnum" label="扣分数" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { fetchCredit, fetchCreditOne } from '@/api/credit'

export default {
  name: 'Table',
  data() {
    return {
      list: null,
      // 加载状态
      listLoading: false,
      queryInfo: {
        page: 1
      },
      roleId: '',
      dialogTableVisible: false,
      // 违规消息
      messages: [],
      total: 0
    }
  },
  created() {
    this.getInformation()
  },
  methods: {
    getInformation() {
      this.listLoading = true
      fetchCredit(this.queryInfo).then((response) => {
        this.list = response.data.repList
        this.total = response.data.allpage * 10
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    message(role) {
      this.roleId = role.uid
      this.listLoading = true
      fetchCreditOne(this.roleId).then((response) => {
        this.messages = response.data
        this.dialogTableVisible = true
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getInformation()
    }
  }
}
</script>

<style scoped>
.el-pagination{
  text-align: center;
}
.el-table {
  margin-top: 15px;
  margin-bottom: 15px;
}
.detail{
  background-color: lightseagreen;
  color: #fff;
  border-radius: 10px;
  border: none;
}
.detail:hover {
  background-color: rgb(34, 149, 194);
  color: #fff;
  border-radius: 10px;
  border: none;
}
.good{
  background-color:rgb(239, 242, 255);
  color: rgb(78, 102, 238);
  border-color: rgb(199, 235, 238) !important;
}
.well{
  background-color:rgb(239, 255, 254);
  color: rgb(112, 216, 207);
  border-color: rgb(209, 235, 229) !important;
}
.ordinary{
  background-color:rgb(255, 247, 223);
  color: rgb(253, 173, 25);
  border-color:  rgb(231, 225, 171) !important;
}
.qualified{
  background-color:rgb(239, 247, 255);
  color: rgb(112, 111, 112);
  border-color:  rgb(235, 232, 232) !important;
}
.fail{
  background-color:rgb(255, 218, 218);
  color: rgb(255, 0, 0);
  border-color:  rgb(236, 196, 196);
}
</style>
